<section type="security" label="SECURITY SCHEMES" [counterItems]="securitySchemes()"
         contextHelp="Use this section to configure your API's security options.  There are several schemes you can choose from, for example OAuth2."
         [collaborationNodePath]="securitySchemesPath()"
         [validationModels]="securitySchemes()">
    <span actions>
        <icon-button (onClick)="openSecuritySchemeModal()" [pullRight]="true" type="add"
                     [title]="'Add a security scheme to the API.'"></icon-button>
        <icon-button (onClick)="deleteAllSecuritySchemes()" [disabled]="!hasSecuritySchemes()"
                     [pullRight]="true" type="delete"
                     title="Delete all security schemes."></icon-button>
    </span>
    <div body>
        <signpost *ngIf="!hasSecuritySchemes()">
            <span>No security options have been configured.</span>
            <a (click)="openSecuritySchemeModal()">Add a security scheme</a>
        </signpost>

        <!-- The list of schemes -->
        <div class="schemes" *ngIf="hasSecuritySchemes()">
            <security-scheme-row *ngFor="let scheme of securitySchemes()" [scheme]="scheme"
                                 (onEdit)="openSecuritySchemeModal(scheme)"
                                 (onDelete)="deleteSecurityScheme(scheme)"
                                 (onRename)="openRenameDialog(scheme)"
                                 [document]="document"></security-scheme-row>
        </div>
    </div>
</section>
<rename-entity-dialog #renameDialog
                      type="Security Scheme"
                      title="Rename Security Scheme"
                      warning="Renaming a Security Scheme will also update any references to that scheme elsewhere in the API (e.g. security requirements in operations)."
                      validationPattern="[a-zA-Z0-9\.\-_]+"
                      (onRename)="rename($event)"></rename-entity-dialog>
